<template>
	<view class="">
		<view class="detail_top">
			<span>活动报名</span>
			<span>$445</span>
		</view>
		<view class="detail_bot">
			<view class="detailitem" v-for="(item,index) in list">
				<view class="detail_bot_l detailitem_item">
					主办方
				</view>
				<view class="detail_bot_r detailitem_item">
					姐妹团
				</view>
			</view>
		</view>
		<view class="user">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/01.jpeg" mode=""></image>
			<view class="user_content">
				<span>邪门铜须</span>
				<span>124412412421</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{title:'主办方',content:'姐妹团'},
					{title:'主办方',content:'姐妹团'},
					{title:'主办方',content:'姐妹团'},
					{title:'主办方',content:'姐妹团'},
					{title:'主办方',content:'姐妹团'},
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.detail_top {
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		border-bottom: 2upx solid #999999;
		padding: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		span:nth-child(1) {
			font-size: 28upx;
			line-height: 40upx;
			font-weight: bold;
			color: #333333;
		}
		span:nth-child(2) {
			font-size: 32upx;
			line-height: 40upx;
			color: #007AFF;
		}
	}
	.detail_bot {
		background-color: #FFFFFF;
		margin-bottom: 8upx;
		padding: 0 20upx;
		box-sizing: border-box;
		.detailitem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80upx;
			.detailitem_item {
				font-weight: 32upx;
				color: #333;
			}
		}
	}
	.user {
		width: 100%;
		padding:  20upx;
		box-sizing: border-box;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		image {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-right: 20upx;
		}
		.user_content {
			display: flex;
			flex-direction: column;
			height: 100upx;
			justify-content: space-between;
		}
	}
</style>
